<template>
  <div class="bottom-area">
    <div class="groups">
      <!-- item一共有6个 前面5个结构完全一样 最后1个有所不同 -->
      <div class="item" v-for="(item, index) in bottomTools" :key="index">
        <router-link :to="item.path">
          <div class="icon">
            <i :class="['iconfont', item.icon]"></i>
          </div>
          <div class="text">
            {{ item.text }}
          </div>
        </router-link>
      </div>
      <div class="item">
        <el-popover popper-style="background-color:transparent;color:#fff">
          <template #reference>
            <div class="icon">
              <i class="iconfont icon-chizi_o"></i>
            </div>
          </template>
          <template #default>
            <!-- 放置4个形状图标 -->
            <div
              class="measureIcons"
              style="display: flex; justify-content: space-around"
            >
              <div
                class="measureIcon"
                v-for="(icon, index) in measureIcons"
                :key="index"
              >
                <router-link :to="`/measure${icon.path}`">
                  <i :class="['iconfont', icon.icon]"></i>
                </router-link>
              </div>
            </div>
          </template>
        </el-popover>
        <div style="font-size: 12px">测量距离</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const bottomTools = [
  {
    path: "/rotate",
    text: "自转",
    icon: "icon-ditu_diqiu",
  },
  {
    path: "/plot",
    text: "控制台",
    icon: "icon-kongzhitai",
  },
  {
    path: "/city-view",
    text: "城市视图",
    icon: "icon-feiji",
  },
  {
    path: "/search",
    text: "查询",
    icon: "icon-fangdajing",
  },
  {
    path: "/bridge",
    text: "桥梁",
    icon: "icon-qiaoliang",
  },
];
const measureIcons = [
  {
    path: "/line",
    icon: "icon--_zhexian",
  },
  {
    path: "/rect",
    icon: "icon-checkbox",
  },
  {
    path: "/polygon",
    icon: "icon-duobianxing",
  },
  {
    path: "/circle",
    icon: "icon-xingzhuang-tuoyuanxing",
  },
];
</script>

<style lang="scss" scoped>
// 去掉a标签默认的样式
a {
  all: unset;
}
.bottom-area {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 900;
  color: #fff;
  width: 100vw;
  height: 70px;
  background-image: url("/bcg-image/xzd-header.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: rotateZ(180deg);
  .groups {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    transform: rotateZ(180deg);
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-left: 5px;
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        font-size: 12px;
      }
      .icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgb(0, 0, 147, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
